<template>
  <div id="goodsDetailsMain">
    <div class="goodsDetailsMainLeft">
      <div class="goodsInfTop_loading" v-if="!response">
        <div
          style="margin-top: 30px; margin-bottom: 100px"
          v-loading="true"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
        ></div>
      </div>
      <div class="goodsInfTop" v-else>
        <div class="infoBox">
          <div class="logo">
            <el-popover
              placement="right"
              width="200"
              popper-class="big_img"
              :visible-arrow="false"
              trigger="click"
            >
              <img
                :src="response && response.proLogo"
                v-errorImg:shop
                slot="reference"
              />
              <img :src="response && response.proLogo" v-errorImg:shop />
            </el-popover>
            <p class="coverbox" v-if="response.proStatus == 1">已下架</p>
          </div>
          <div>
            <p
              class="title"
              v-if="response && response.proTitle"
              @click="roCode(response.proCode)"
            >
              <SourceIcon :sourceid="response.profrom" />
              {{ response.proTitle }}
            </p>
            <div>
              <!-- <div class="code">
                <img
                  @mouseenter="qrcode=true"
                  @mouseleave="qrcode=false"
                  src="@/assets/liu/goodsDetailsCode.png"
                />
                <vue-qr
                  :size="150"
                  :margin="0"
                  :auto-color="true"
                  v-if="response&&qrcode"
                  :dot-scale="1"
                  :text="response.proCode"
                />
              </div>-->

              <!-- <div class="code"><img src="@/assets/liu/goodsDetailsCode.png">

              </div>-->
              <el-popover
                placement="bottom"
                trigger="hover"
                popper-class="hot_video_popover"
                v-if="response"
              >
                <vue-qr
                  :size="100"
                  :margin="0"
                  :auto-color="true"
                  v-if="response && response.proCode"
                  :dot-scale="1"
                  :text="response.proCode"
                />
                <div style="width: 100px">【抖音扫码，查看商品】</div>
                <img slot="reference" src="@/assets/liu/goodsDetailsCode.png" />
              </el-popover>
              <el-tooltip
                v-if="response && response.proTitle"
                class="item"
                effect="light"
                content="复制标题"
                placement="top"
                popper-class="mytooltip"
                v-clipboard:error="onError"
                v-clipboard:copy="response.proTitle"
                :hide-after="2000"
              >
                <div class="copylink">
                  <img @click="copy" src="@/assets/liu/copy.png" />
                </div>
              </el-tooltip>
              <!-- <el-tooltip class="item" effect="light" content="复制标题" placement="top" popper-class="mytooltip"
                :hide-after="2000">
                <div v-if="response&&response.proTitle" class="copytit" v-clipboard:error="onError"
                  v-clipboard:copy="response.proTitle"><img src="@/assets/liu/copy.png" @click="copy"></div>
              </el-tooltip>-->
              <el-tooltip
                v-if="response && response.proCode"
                class="item"
                effect="light"
                content="复制链接"
                placement="top"
                popper-class="mytooltip"
                v-clipboard:error="onError"
                v-clipboard:copy="response.proCode"
                :hide-after="2000"
              >
                <div class="copylink">
                  <img @click="copy" src="@/assets/liu/copylink.png" />
                </div>
              </el-tooltip>
              <!-- <el-tooltip class="item" effect="light" content="复制链接" placement="top" popper-class="mytooltip"
                v-clipboard:error="onError" v-clipboard:copy="response.proCode" :hide-after="2000">
                <div class="copylink"><img @click="copy" src="@/assets/liu/copylink.png"></div>
              </el-tooltip>-->
            </div>
          </div>
        </div>
        <div class="commonStyle">
          <span>商品价格</span>
          <span v-if="response.proPrice == response.maxProPrice"
            >￥{{ response.proPrice }}</span
          >
          <span v-else
            >￥{{ response.proPrice }}-￥{{ response.maxProPrice }}</span
          >
          <img
            v-if="response.proPrice"
            class="num-img"
            src="@/assets/shi/k-line.png"
            @click="
              FansDays = '30天';
              getFansEchart();
            "
            alt
          />
          <!-- <span v-else-if="response.proPrice= '--' ">{{ response.proPrice }}</span> -->
        </div>
        <div class="commonStyle">
          <span>直播价格</span>
          <span
            v-if="
              response &&
              response.maxPrice &&
              Number(response.maxPrice) > Number(response.livePrice)
            "
            >￥{{ response.livePrice + "-" + response.maxPrice }}</span
          >
          <span
            v-else-if="
              response &&
              response.maxPrice &&
              Number(response.maxPrice) == 0 &&
              Number(response.livePrice) == 0
            "
            >￥0</span
          >
          <span
            v-else-if="
              response &&
              response.maxPrice &&
              Number(response.maxPrice) == Number(response.livePrice)
            "
            >￥{{ response.livePrice }}</span
          >
          <span
            v-else-if="
              response &&
              response.maxPrice &&
              Number(response.maxPrice) < Number(response.livePrice)
            "
            >￥{{ response.livePrice }}</span
          >
          <span
            v-else-if="
              response &&
              response.maxPrice &&
              response.maxPrice == '--' &&
              response.livePrice == '--'
            "
            >￥0</span
          >
          <img
            v-if="response && response.maxPrice && response.maxPrice != '--'"
            class="num-img"
            src="@/assets/shi/k-line.png"
            @click="
              getFabulousEchart();
              FabulousDays = '30天';
            "
            alt
          />
        </div>
        <div class="commonStyle">
          <span>佣金率</span>
          <span
            v-if="
              response && response.commissionRate && response.commissionRate < 1
            "
          >
            {{
              response.commissionRate == "0" || response.commissionRate == "--"
                ? 0
                : (response.commissionRate * 100).toFixed(1) + "%"
            }}
          </span>
          <span v-else>--</span>
          <img
            v-if="
              response && response.commissionRate && response.commissionRate < 1
            "
            class="num-img"
            src="@/assets/shi/k-line.png"
            @click="
              getcommEchart();
              FabucommDays = '30天';
            "
            alt
          />
        </div>
        <div class="commonStyle">
          <span>好评率</span>
          <span v-if="response && response.goodRate">{{
            formatRate(response.goodRate, 2, 2)
          }}</span>
          <span v-else>--</span>
          <!-- <img
            v-if="response && response.goodRate"
            class="num-img"
            src="@/assets/shi/k-line.png"
            @click="
              favorableGetData();
              favorableDays = '30天';
            "
            alt
          />-->
        </div>
        <div class="commonStyle category">
          <span>商品类目</span>
          <span>{{ response && response.proCategory }}</span>
        </div>
        <div class="addCollection">
          <button
            v-if="response && !response.isCollect"
            @click="add_star(1, response.proId)"
          >
            添加收藏
          </button>
          <button
            v-if="response && response.isCollect"
            @click="add_star(0, response.proId)"
          >
            已收藏
          </button>
        </div>
      </div>
      <div class="goodsInfBot" v-if="response && response.profrom == 2">
        <div v-if="response01">
          <div class="InfBotBox">
            <div>
              <SourceIcon :sourceid="response.profrom" />
              <div class="botName" @click="toDetails(response01.shopId)">
                {{ response01 && response01.shopTitle }}
              </div>
            </div>
            <!-- 小店口碑趋势图 -->
            <div class="trendStyle">
              <p class="high" v-if="response01.wordofmouthlevel == 1">
                {{ response01 && response01.wordofmouth }}
                <span>高</span>
              </p>
              <p class="in" v-if="response01.wordofmouthlevel == 2">
                {{ response01 && response01.wordofmouth }}
                <span>中</span>
              </p>
              <p class="low" v-if="response01.wordofmouthlevel == 3">
                {{ response01 && response01.wordofmouth }}
                <span>低</span>
              </p>
              <img
                @click="popLine"
                class="k_line"
                src="../../../assets/shi/k-line.png"
                alt
              />
            </div>
            <!-- 小店口碑趋势图 end -->

            <!-- <div>
            <p class="score" v-if="response01">{{response01.evaluatespeed}}</p>
            <p class="score">中</p>
            <img src="@/assets/shi/k-line.png" class="num-img">
            </div>-->
          </div>
          <div class="InfBotBox1" v-if="response01">
            <div class="high" v-if="response01.wordofmouthlevel == 1">
              <p>
                {{
                  response01 && response01.wordofmouth
                    ? response01.wordofmouth
                    : "--"
                }}
                <span>高</span>
              </p>
              <p>商品体验</p>
            </div>
            <div class="in" v-if="response01.wordofmouthlevel == 2">
              <p>
                {{
                  response01 && response01.wordofmouth
                    ? response01.wordofmouth
                    : "--"
                }}
                <span>中</span>
              </p>
              <p>商品体验</p>
            </div>
            <div class="low" v-if="response01.wordofmouthlevel == 3">
              <p>
                {{
                  response01 && response01.wordofmouth
                    ? response01.wordofmouth
                    : "--"
                }}
                <span>低</span>
              </p>
              <p>商品体验</p>
            </div>
            <div class="high" v-if="response01.serviceattitudelevel == 1">
              <p>
                {{
                  response01 && response01.serviceattitude
                    ? response01.serviceattitude
                    : "--"
                }}
                <span>高</span>
              </p>
              <p>商品服务</p>
            </div>
            <div class="in" v-if="response01.serviceattitudelevel == 2">
              <p>
                {{
                  response01 && response01.serviceattitude
                    ? response01.serviceattitude
                    : "--"
                }}
                <span>中</span>
              </p>
              <p>商品服务</p>
            </div>
            <div class="low" v-if="response01.serviceattitudelevel == 3">
              <p>
                {{
                  response01 && response01.serviceattitude
                    ? response01.serviceattitude
                    : "--"
                }}
                <span>低</span>
              </p>
              <p>商品服务</p>
            </div>
            <div class="high" v-if="response01.deliveryspeedlevel == 1">
              <p>
                {{
                  response01 && response01.deliveryspeed
                    ? response01.deliveryspeed
                    : "--"
                }}
                <span>高</span>
              </p>
              <p>物流体验</p>
            </div>
            <div class="in" v-if="response01.deliveryspeedlevel == 2">
              <p>
                {{
                  response01 && response01.deliveryspeed
                    ? response01.deliveryspeed
                    : "--"
                }}
                <span>中</span>
              </p>
              <p>物流体验</p>
            </div>
            <div class="low" v-if="response01.deliveryspeedlevel == 3">
              <p>
                {{
                  response01 && response01.deliveryspeed
                    ? response01.deliveryspeed
                    : "--"
                }}
                <span>低</span>
              </p>
              <p>物流体验</p>
            </div>
            <div
              v-if="
                response01.wordofmouthlevel == '0' &&
                response01.serviceattitudelevel == '0' &&
                response01.deliveryspeedlevel == '0'
              "
              class="noting"
            >
              暂无店铺评分
            </div>
          </div>
        </div>
        <div
          v-else
          style="margin-top: 30px; margin-bottom: 100px"
          v-loading="listLoading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
        ></div>
      </div>
    </div>
    <!-- <div class="goodsDetailsMainRight"> -->
    <div id="collectRoot">
      <div class="rightBox">
        <div class="btn_group">
          <button
            :class="{ active: input_btn == '0' }"
            @click="input_btn = '0'"
          >
            数据概览
          </button>
          <button
            :class="{ active: input_btn == '1' }"
            @click="input_btn = '1'"
          >
            关联直播
          </button>
          <button
            :class="{ active: input_btn == '2' }"
            @click="input_btn = '2'"
          >
            关联视频
          </button>
          <button
            :class="{ active: input_btn == '3' }"
            @click="input_btn = '3'"
          >
            带货达人
          </button>
          <button
            :class="{ active: input_btn == '4' }"
            @click="input_btn = '4'"
          >
            观众分析
          </button>
        </div>
        <div class="rig_box">
          <div class="rightBox-content">
            <dataOverview :id="id" v-if="input_btn == '0'" />
            <LiveDetail :id="id" v-if="input_btn == '1'" />
            <videoDetail :id="id" v-if="input_btn == '2'" />
            <talentdetails :id="id" v-if="input_btn == '3'" />
            <audienceAnalysis :id="id" v-if="input_btn == '4'" />

            <!-- <div class="display_box"></div> -->
          </div>
        </div>
      </div>
    </div>
    <!-- <el-tabs v-model="activeName">
        <el-tab-pane label="数据概括" name="0">
          <dataOverview v-if="activeName == '0'" />
        </el-tab-pane>
        <el-tab-pane label="直播详情" name="1">
          <LiveDetail v-if="activeName == '1'" />
        </el-tab-pane>
        <el-tab-pane label="视频详情" name="2">
          <videoDetail v-if="activeName == '2'" />
        </el-tab-pane>
        <el-tab-pane label="达人详情" name="3">
          <talentdetails v-if="activeName == '3'" />
        </el-tab-pane>
        <el-tab-pane label="观众分析" name="4">
          <audienceAnalysis v-if="activeName == '4'" />b  
    </el-tabs>-->
    <!-- </div> -->
    <!-- 商品价格 趋势图 -->
    <el-dialog
      :visible.sync="showFansEchart"
      width="740px"
      top="22.5vh"
      class="dialogLoginBox"
    >
      <div class="popup_wrap">
        <div
          v-loading="FansLoading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
        >
          <div class="popup_wrap-title">
            <div class="title">商品价格趋势图</div>
            <div class="time_slot" id="STimeSlot">
              <radio_group01
                :radio_values="['近7天', '30天', '90天']"
                v-model="FansDays"
                class="tab01"
              />
              <div class="optionsBox">
                <el-date-picker
                  class="long_time"
                  v-model="FansliveTime"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  prefix-icon="el-icon-arrow-down"
                  unlink-panels
                  :clearable="false"
                  :picker-options="FansStartEnd"
                  value-format="yyyy-MM-dd"
                  @change="FansPicker"
                ></el-date-picker>
              </div>
            </div>
          </div>
          <div class="popup_wrap-echart m-t30">
            <KChart
              v-if="FansEchart.xData.length"
              :xData="FansEchart.xData"
              :series1="FansEchart.yData1"
              :series2="FansEchart.yData2"
              name1="最低价"
              :name2="FabuName"
            />
            <!-- <div
            v-loading="goodsLoading"
            v-if="goodsLoading"
            class="loading"
            element-loading-text="拼命加载中..."
            element-loading-spinner="el-icon-loading"
            ></div>-->
            <!-- <div class="zwbox" v-else>
            <div class="zw">
              <img src="@/assets/liu/zw.png" />
              <p>暂无数据</p>
            </div>
            </div>-->
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- 直播价格 趋势图 -->
    <el-dialog
      v-if="FabulousEchart"
      :visible.sync="showFabulousEchart"
      width="740px"
      top="22.5vh"
      class="dialogLoginBox"
    >
      <div class="popup_wrap">
        <div
          v-loading="FabulousLoading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
        >
          <div class="popup_wrap-title">
            <div class="title">直播价格趋势图</div>
            <div class="time_slot" id="STimeSlot">
              <radio_group01
                :radio_values="['近7天', '30天', '90天']"
                v-model="FabulousDays"
                class="tab01"
              />
              <div class="optionsBox">
                <el-date-picker
                  class="long_time"
                  v-model="FabulousliveTime"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  prefix-icon="el-icon-arrow-down"
                  unlink-panels
                  :clearable="false"
                  :picker-options="FabulousStartEnd"
                  value-format="yyyy-MM-dd"
                  @change="FabulousPicker"
                ></el-date-picker>
              </div>
            </div>
          </div>
          <div class="popup_wrap-echart m-t30">
            <KChart
              v-if="FabulousEchart.xData.length"
              :xData="FabulousEchart.xData"
              :series1="FabulousEchart.yData1"
              :series2="FabulousEchart.yData2"
              name1="最低价"
              :name2="FabulousName"
            />
            <!-- <div class="zwbox" v-else>
            <div class="zw">
              <img src="@/assets/liu/zw.png" />
              <p>暂无数据</p>
            </div>
            </div>-->
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- 佣金率 趋势图 -->
    <el-dialog
      :visible.sync="showcommEchart"
      width="740px"
      top="22.5vh"
      class="dialogLoginBox"
    >
      <div class="popup_wrap">
        <div
          v-loading="commLoading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
        >
          <div class="popup_wrap-title">
            <div class="title">佣金率趋势图</div>
            <div class="time_slot" id="STimeSlot">
              <radio_group01
                :radio_values="['近7天', '30天', '90天']"
                v-model="FabucommDays"
                class="tab01"
              />
              <div class="optionsBox">
                <el-date-picker
                  class="long_time"
                  v-model="FabucommliveTime"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  prefix-icon="el-icon-arrow-down"
                  unlink-panels
                  :clearable="false"
                  :picker-options="FabucommStartEnd"
                  value-format="yyyy-MM-dd"
                  @change="FabucommsPicker"
                ></el-date-picker>
              </div>
            </div>
          </div>
          <div class="popup_wrap-echart m-t30">
            <KChartRatio
              v-if="commEchart.xData.length"
              :xData="commEchart.xData"
              :series1="commEchart.yData1"
              name1="佣金率"
            />
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- 好评率 趋势图 -->
    <el-dialog
      :visible.sync="favorableEchart"
      width="740px"
      top="22.5vh"
      class="dialogLoginBox"
    >
      <div class="popup_wrap">
        <div
          v-loading="favorableLoading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
        >
          <div class="popup_wrap-title">
            <div class="title">好评率趋势图</div>
            <div class="time_slot" id="STimeSlot">
              <radio_group01
                :radio_values="['近7天', '30天', '90天']"
                v-model="favorableDays"
                class="tab01"
              />
              <div class="optionsBox">
                <el-date-picker
                  class="long_time"
                  v-model="favorableliveTime"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  prefix-icon="el-icon-arrow-down"
                  unlink-panels
                  :clearable="false"
                  :picker-options="favorableStartEnd"
                  value-format="yyyy-MM-dd"
                  @change="favorablePicker"
                ></el-date-picker>
              </div>
            </div>
          </div>
          <div class="popup_wrap-echart m-t30">
            <KChartRatio
              v-if="favorableData.xData.length"
              :xData="favorableData.xData"
              :series1="favorableData.yData1"
              name1="好评率"
            />
          </div>
        </div>
      </div>
    </el-dialog>
    <!-- 口碑趋势 -->
    <el-dialog
      :visible.sync="showMouthEchart"
      width="740px"
      top="22.5vh"
      class="dialogLoginBox"
    >
      <div class="popup_wrap">
        <div
          v-loading="Loading"
          element-loading-text="拼命加载中"
          element-loading-spinner="el-icon-loading"
        >
          <div class="popup_wrap-title">
            <div class="title">口碑趋势</div>
          </div>
          <div class="popup_wrap-explain">
            <el-rate
              v-model="scareValue"
              disabled
              :colors="['#4f5058', '#fd7f2c', '#ea4759']"
              score-template="{value}"
            ></el-rate>
            <span
              :style="{
                color:
                  scareValue >= 4
                    ? '#ea4759'
                    : scareValue >= 2 && scareValue < 4
                    ? '#fd7f2c'
                    : '#4f5058',
              }"
              >{{ scareValue }}</span
            >

            <span v-if="response01.wordofmouthlevel == 1" style="color: #ea4759"
              >高</span
            >
            <span
              v-else-if="response01.wordofmouthlevel == 2"
              style="color: #fd7f2c"
              >中</span
            >
            <span
              v-else-if="response01.wordofmouthlevel == 3"
              style="color: #4f5058"
              >低</span
            >
            <!-- 先不做这个部分 -->
            <!-- <span>
                &nbsp;&nbsp;带货口碑排名打败
                <i style="font-style:normal;color:#fd893d;">{{ 92.5+'%' }}</i> 同行
            </span>-->
          </div>
          <div class="popup_wrap-echart">
            <KChart
              v-if="showMouthEchart"
              :xData="PraiseData.x"
              :series1="PraiseData.y"
              name1="口碑趋势"
            />
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import KChart from "./KChart.vue"; // 价格趋势图
import KChartRatio from "./KChartRatio.vue"; // %价格趋势图
import SourceIcon from "@/component/SourceIcon.vue"; //图标
import LiveDetail from "./liveDetails.vue"; //直播详情
import videoDetail from "./videoDetails.vue"; //视频详情
import dataOverview from "./dataOverview.vue"; //数据概览
import audienceAnalysis from "./audienceAnalysis.vue"; //观众分析
import talentdetails from "./talentdetails.vue"; //观众分析
export default {
  // props: ['id'],
  data() {
    return {
      iscopy: false,
      listLoading: false,
      input_btn: "0",
      qrcode: false,
      activeName: "0",
      response: null,
      response01: {},
      id: "",
      FansDays: "30天", //商品价格 趋势
      showFansEchart: false, //商品价格 趋势
      FansLoading: false,
      //左侧商品价格弹窗数据
      FansEchart: {
        xData: [],
        yData1: [],
        yData2: [],
      },
      FabuName: "最高价",
      showFabulousEchart: false, // 直播价格趋势图
      FabulousDays: "30天", //直播价格 趋势
      FabulousLoading: false, //弹窗loading
      FabulousName: "最高价",
      FabulousEchart: {
        xData: [],
        yData1: [],
        yData2: [],
      },
      showcommEchart: false, // 佣金率
      FansliveTime: "", // 商品价格 弹窗选择时间
      FabucommliveTime: "", // 佣金率
      FabucommDays: "30天",
      commLoading: false,
      commEchart: {
        xData: [],
        yData1: [],
        yData2: [],
      },
      FansStartEnd: {
        disabledDate: (time) => {
          return (
            time.getTime() < Date.now() - 180 * 24 * 60 * 60 * 1000 ||
            time.getTime() > Date.now()
          ); // 返回 所有时间 大于 当前时间
        },
      },
      FabulousliveTime: "", //直播价格 弹窗选择时间
      FabulousStartEnd: {
        disabledDate: (time) => {
          return (
            time.getTime() < Date.now() - 180 * 24 * 60 * 60 * 1000 ||
            time.getTime() > Date.now()
          );
        },
      },
      FabucommliveTime: "", // 佣金率
      FabucommDays: "30天",
      commEchart: {
        xData: [],
        yData1: [],
      },
      FabucommStartEnd: {
        disabledDate: (time) => {
          return (
            time.getTime() < Date.now() - 180 * 24 * 60 * 60 * 1000 ||
            time.getTime() > Date.now()
          );
        },
      },
      startDate: "",
      endDate: "",

      // 好评率
      favorableEchart: false,
      favorableDays: "30天",
      favorableLoading: false,
      favorableliveTime: "", // 好评率
      favorableStartEnd: {
        disabledDate: (time) => {
          return (
            time.getTime() < Date.now() - 180 * 24 * 60 * 60 * 1000 ||
            time.getTime() > Date.now()
          );
        },
      },
      favorableData: {
        xData: [],
        yData1: [],
      },
      showMouthEchart: false,
      scareValue: 4,
      Loading: false,
      PraiseData: [],
      shopId: "",
    };
  },
  components: {
    SourceIcon,
    LiveDetail,
    videoDetail,
    dataOverview,
    audienceAnalysis,
    talentdetails,
    KChart,
    KChartRatio,
  },
  computed: {},
  created() {
    if (this.$route.params.index) this.input_btn = this.$route.params.index;
    if (this.$route.params.id) this.id = this.$route.params.id;
    //  this.newinfo();
    this.get_data();
  },
  mounted() {},
  watch: {
    FansDays: function (newVal, oldVal) {
      // 商品价格趋势
      if (newVal) {
        this.FansEchart.yData1 = [];
        this.FansEchart.yData2 = [];
        this.FansEchart.xData = [];
        this.getFansEchart(); //商品价格 趋势
      }
    },
    FabulousDays: function (newVal, oldVal) {
      // 直播价格趋势
      if (newVal) {
        this.FabulousEchart.yData1 = [];
        this.FabulousEchart.yData2 = [];
        this.FabulousEchart.xData = [];
        this.getFabulousEchart();
      }
    },
    FabucommDays: function (newVal, oldVal) {
      // 佣金率 趋势
      if (newVal) {
        this.commEchart.yData1 = [];
        this.commEchart.xData = [];
        this.getcommEchart();
      }
    },
    favorableDays: function (newVal, oldVal) {
      // 好评率 趋势
      if (newVal) {
        this.favorableData.yData1 = [];
        this.favorableData.xData = [];
        this.favorableGetData();
      }
    },
  },
  methods: {
    popLine() {
      this.showMouthEchart = true;
      this.showChangeListAPI();
    },
    toDetails(id) {
      let router = this.$router.resolve({
        path: `/talent_main/shopDetails/${id}/0`,
      });
      window.open(router.href, "_blank");
    },
    roCode(i) {
      window.open(i);
    },
    copy() {
      if (this.iscopy) return;
      setTimeout(() => {
        this.iscopy = false;
      }, 1000);

      this.$message({
        message: "复制成功！",
        type: "success",
        duration: 1000,
        center: true,
        // offset: 100,
      });

      this.iscopy = true;
    },
    // 收藏
    add_star(flag, id) {
      let that = this;
      if (flag) {
        this.$axios
          .post("/api/collection/InsertCollection", {
            CollectId: id,
            Module: 5, //模块 1达人 2视频 3音乐 4话题 5商品
          })
          .then((res) => {
            if (res.data.code == 0) {
              this.$set(this.response, "isCollect", 1);
              // console.log(this.response)

              this.$message({
                message: "收藏成功！",
                type: "success",
                duration: 2000,
              });
            } else {
              this.$message({
                message: "收藏失败！",
                type: "error",
                duration: 2000,
              });
            }
          })
          .catch((err) => {
            console.log(err);
            this.$message({
              message: "收藏失败！",
              type: "error",
              duration: 2000,
            });
          });
      } else {
        this.$axios
          .post("/api/collection/CancelCollection", {
            CollectId: id,
            Module: 5, //模块 1达人 2视频 3音乐 4话题 5商品
          })
          .then((res) => {
            if (res.data.code == 0) {
              this.$set(this.response, "isCollect", 0);
              this.$message({
                message: "取消收藏成功！",
                type: "success",
                duration: 2000,
              });
            } else {
              this.$message({
                message: "取消收藏失败！",
                type: "error",
                duration: 2000,
              });
            }
          })
          .catch((err) => {
            console.log(err);
            this.$message({
              message: "取消收藏失败！",
              type: "error",
              duration: 2000,
              // offset: '400',
            });
          });
      }
    },
    // 口碑评分
    showChangeListAPI() {
      this.Loading = true;
      this.$axios
        .post("/api/shop/GetShopData2ScoreTrendList", {
          ShopID: this.shopId,
        })
        .then((res) => {
          if (res.data.code === 0) {
            this.PraiseData = res.data.data.wordOfMouth;
            this.Loading = false;
          }
        });
    },
    get_data() {
      this.listLoading = true;
      let that = this;
      this.loading = true;

      this.$axios({
        method: "get",
        url: "/api/product/newinfo",
        params: {
          // proId: "3487748950235198351"
          proId: this.id,
        },
      })
        .then((response) => {
          this.loading = false;
          if (response.data.code == 0) {
            this.response = response.data.data;

            document.title =
              this.response.proTitle + "-商品热度|带货|观众数据分析-掌上精选";
            this.time = this.timestamp(this.response.timeUnix, "Y-M-D h:m:s");
            this.$axios({
              method: "get",
              url: "/api/shop/info",
              params: {
                shopId: response.data.data.proShop,
              },
            })
              .then((response01) => {
                this.listLoading = false;
                if (response01.data.code == 0) {
                  this.response01 = response01.data.data;
                  this.scareValue = +response01.data.data.wordofmouth;
                  this.shopId = response.data.data.proShop;
                }
              })
              .catch((error) => {
                console.log(error);
              });
          }
        })
        .catch((error) => {
          this.loading = false;
          console.log(error);
        });
    },
    onError() {
      this.$message.error(this.$t("prompt.copyFail"));
    },
    //
    FansPicker() {
      this.FansDays = "";
      this.FansEchart.yData1 = [];
      this.FansEchart.yData2 = [];
      this.FansEchart.xData = [];
      this.getFansEchart();
    },
    FabulousPicker() {
      this.FabulousDays = "";
      this.FabulousEchart.yData1 = [];
      this.FabulousEchart.yData2 = [];
      this.FabulousEchart.xData = [];
      this.getFabulousEchart();
    },
    FabucommsPicker() {
      this.FabucommDays = "";
      this.commEchart.yData1 = [];
      this.commEchart.yData2 = [];
      this.commEchart.xData = [];
      this.getcommEchart();
    },
    // 好评率
    favorablePicker() {
      this.favorableDays = "";
      this.favorableData.yData1 = [];
      this.favorableData.xData = [];
      this.favorableGetData();
    },
    // 获取左侧商品价格趋势
    getFansEchart() {
      this.FansLoading = true;
      this.showFansEchart = true;
      // this.goodsLoading = true;
      switch (this.FansDays) {
        case "近7天":
          this.endDate = this.timestamp(Date.now() / 1000, "Y-M-D");
          this.startDate = this.timestamp(
            Date.now() / 1000 - 86400 * 6,
            "Y-M-D"
          );
          break;

        case "30天":
          this.endDate = this.timestamp(Date.now() / 1000, "Y-M-D");
          this.startDate = this.timestamp(
            Date.now() / 1000 - 86400 * 29,
            "Y-M-D"
          );
          break;
        case "90天":
          this.endDate = this.timestamp(Date.now() / 1000, "Y-M-D");
          this.startDate = this.timestamp(
            Date.now() / 1000 - 86400 * 89,
            "Y-M-D"
          );
          break;
        default:
          this.startDate = this.FansliveTime[0];
          this.endDate = this.FansliveTime[1];
          break;
      }
      this.FansliveTime = [this.startDate, this.endDate];
      this.$axios({
        method: "get",
        url: "api/product/pricetrend",
        params: {
          proId: this.id,
          startDate: this.startDate,
          endDate: this.endDate,
        },
      }).then((res) => {
        if (res.data.code == 0) {
          this.FansLoading = false;
          this.FansEchart.xData = res.data.data[0].map((ele) => {
            return this.timestamp(ele, "M-D");
          });
          this.FansEchart.yData1 = res.data.data[1];
          let a = res.data.data[2].every((item) => {
            return item == "0.00" || item == "0";
          });
          if (a) {
            this.FansEchart.yData2 = [];
            this.FabuName = "";
          } else {
            this.FabuName = "最高价";
            this.FansEchart.yData2 = res.data.data[2];
          }
        }
      });
    },
    // 获取左侧直播价格趋势
    getFabulousEchart() {
      this.FabulousLoading = true;
      this.showFabulousEchart = true;
      switch (this.FabulousDays) {
        case "近7天":
          this.endDate = this.timestamp(Date.now() / 1000, "Y-M-D");
          this.startDate = this.timestamp(
            Date.now() / 1000 - 86400 * 6,
            "Y-M-D"
          );
          break;

        case "30天":
          this.endDate = this.timestamp(Date.now() / 1000, "Y-M-D");
          this.startDate = this.timestamp(
            Date.now() / 1000 - 86400 * 29,
            "Y-M-D"
          );
          break;
        case "90天":
          this.endDate = this.timestamp(Date.now() / 1000, "Y-M-D");
          this.startDate = this.timestamp(
            Date.now() / 1000 - 86400 * 89,
            "Y-M-D"
          );
          break;
        default:
          this.startDate = this.FabulousliveTime[0];
          this.endDate = this.FabulousliveTime[1];
          break;
      }
      this.FabulousliveTime = [this.startDate, this.endDate];
      this.$axios({
        method: "get",
        url: "api/product/livepricetrend",
        params: {
          proId: this.id,
          startDate: this.startDate,
          endDate: this.endDate,
        },
      }).then((res) => {
        if (res.data.code == 0) {
          this.FabulousLoading = false;
          this.FabulousEchart.xData = res.data.data[0].map((ele) => {
            return this.timestamp(ele, "M-D");
          });
          this.FabulousEchart.yData1 = res.data.data[1];
          let a = res.data.data[2].every((item) => {
            return item == "0.00" || item == "0";
          });
          if (a) {
            this.FabulousEchart.yData2 = [];
            this.FabulousName = "";
          } else {
            this.FabulousName = "最高价";
            this.FabulousEchart.yData2 = res.data.data[2];
          }
        }
      });
    },
    // 获取左侧佣金率价格趋势
    getcommEchart() {
      this.commLoading = true;
      this.showcommEchart = true;
      switch (this.FabucommDays) {
        case "近7天":
          this.endDate = this.timestamp(Date.now() / 1000, "Y-M-D");
          this.startDate = this.timestamp(
            Date.now() / 1000 - 86400 * 6,
            "Y-M-D"
          );
          break;

        case "30天":
          this.endDate = this.timestamp(Date.now() / 1000, "Y-M-D");
          this.startDate = this.timestamp(
            Date.now() / 1000 - 86400 * 29,
            "Y-M-D"
          );
          break;
        case "90天":
          this.endDate = this.timestamp(Date.now() / 1000, "Y-M-D");
          this.startDate = this.timestamp(
            Date.now() / 1000 - 86400 * 89,
            "Y-M-D"
          );
          break;
        default:
          this.startDate = this.FabucommliveTime[0];
          this.endDate = this.FabucommliveTime[1];
          break;
      }
      this.FabucommliveTime = [this.startDate, this.endDate];
      this.$axios({
        method: "get",
        url: "api/product/commissiontrend",
        params: {
          proId: this.id,
          startDate: this.startDate,
          endDate: this.endDate,
        },
      }).then((res) => {
        if (res.data.code == 0) {
          this.commLoading = false;
          this.commEchart.xData = res.data.data[0].map((ele) => {
            return this.timestamp(ele, "M-D");
          });
          this.commEchart.yData1 = res.data.data[1];
        }
      });
    },
    favorableGetData() {
      this.favorableLoading = true;
      this.favorableEchart = true;
      switch (this.favorableDays) {
        case "近7天":
          this.endDate = this.timestamp(Date.now() / 1000, "Y-M-D");
          this.startDate = this.timestamp(
            Date.now() / 1000 - 86400 * 6,
            "Y-M-D"
          );
          break;

        case "30天":
          this.endDate = this.timestamp(Date.now() / 1000, "Y-M-D");
          this.startDate = this.timestamp(
            Date.now() / 1000 - 86400 * 29,
            "Y-M-D"
          );
          break;
        case "90天":
          this.endDate = this.timestamp(Date.now() / 1000, "Y-M-D");
          this.startDate = this.timestamp(
            Date.now() / 1000 - 86400 * 89,
            "Y-M-D"
          );
          break;
        default:
          this.startDate = this.favorableliveTime[0];
          this.endDate = this.favorableliveTime[1];
          break;
      }
      this.favorableliveTime = [this.startDate, this.endDate];
      this.$axios({
        method: "get",
        url: "/api/product/trendtype",
        params: {
          proId: this.id,
          startDate: this.startDate,
          endDate: this.endDate,
          typeids: "5",
        },
      }).then((res) => {
        if (res.data.code == 0) {
          this.favorableLoading = false;
          this.favorableData.xData = res.data.data[0].trendlist[0].map(
            (ele) => {
              return this.timestamp(ele, "M-D");
            }
          );
          this.favorableData.yData1 = res.data.data[0].trendlist[1];
        }
      });
    },
  },
};
</script>

<style lang="less" scoped>
#goodsDetailsMain {
  .rig_box {
    height: calc(100% - 50px);
    border-radius: 4px;
    padding: 20px 0px 3px 0px;
    margin-top: 10px;
    box-sizing: border-box;
    background: #fff;
  }
  margin-left: @margin-num;
  margin-right: @margin-num;
  margin-top: @margin-num;
  overflow: hidden;
  height: calc(100vh - 94px);

  display: flex;
  .goodsDetailsMainLeft {
    width: 300px;

    box-sizing: border-box;
    .goodsInfTop_loading {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      background-color: #fff;
      border-radius: 4px;
      .el-loading-parent--relative {
        width: 100%;
        height: 100px;
      }
    }
    .goodsInfTop {
      margin-bottom: 15px;
      background: #fff;
      padding: 20px 15px 15px 20px;
      border-radius: 4px;
      .infoBox {
        display: flex;
        // margin-top: 10px;

        .logo {
          cursor: pointer;
          width: 50px;
          height: 50px;
          background-color: #ffffff;
          border-radius: 6px;
          margin-right: 10px;
          position: relative;
          .coverbox {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            line-height: 50px;
            background: rgba(0, 0, 0, 0.6);
            font-size: 14px;
            color: #fff;
            text-align: center;
            border-radius: 6px;
          }
          img {
            width: 100%;
            height: 100%;
            border-radius: 6px;
          }
        }
        > div {
          .title {
            &:hover {
              color: #ff924b;
            }
            cursor: pointer;
            width: 202px;
            // height: 40px;
            font-size: 16px;
            font-weight: 600;
            line-height: 22px;
            letter-spacing: 0px;
            color: #222222;
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            margin-bottom: 5px;
          }
          #SourceIcon {
            display: inline-block;
            width: 16px;
            height: 16px;
          }
          > div {
            display: flex;
            margin-bottom: 15px;
            .code {
              width: 30px;
              height: 50px;
              border-radius: 50%;
              margin-right: 8px;
              cursor: pointer;
              > img {
                width: 30px;
                height: 30px;
              }
            }
            .el-popover__reference {
              width: 30px;
              height: 30px;
              margin-right: 8px;
            }
            .copytit {
              width: 30px;
              height: 30px;
              border-radius: 50%;
              margin-right: 8px;
              cursor: pointer;
              > img {
                width: 30px;
                height: 30px;
              }
            }
            .copylink {
              width: 30px;
              height: 30px;
              border-radius: 50%;
              cursor: pointer;
              margin-right: 8px;
              > img {
                width: 30px;
                height: 30px;
              }
            }
          }
        }
      }
    }
    // 折线图
    .num-img {
      width: 13px;
      height: 13px;
      margin-left: 2px;
      cursor: pointer;
    }
    //
    .commonStyle {
      margin-bottom: 15px;
      > span {
        &:nth-child(1) {
          display: inline-block;
          font-size: 12px;
          letter-spacing: 0px;
          color: #888888;
          // margin-right: 25px;
          width: 26%;
        }
        &:nth-child(2) {
          font-size: 13px;
          letter-spacing: 0px;
          color: #222222;
        }
      }
    }
    .category {
      > span {
        &:nth-child(2) {
          // width: 74px;
          padding: 0 10px;
          line-height: 26px;
          text-align: center;
          background-color: #fff7ee;
          border-radius: 4px;
          display: inline-block;
          font-size: 13px;
          letter-spacing: 0px;
          color: #555555;
        }
      }
    }
    .addCollection {
      width: 260px;
      border-top: solid 1px #efefef;
      padding-top: 15px;
      text-align: center;
      > button {
        width: 80px;
        height: 32px;
        border-radius: 4px;
        border: solid 1px #fd7f2c;
        font-size: 14px;
        line-height: 28px;
        letter-spacing: 0px;
        color: #fd7f2c;
      }
    }

    .goodsInfBot {
      width: 300px;
      height: 140px;
      box-sizing: border-box;
      padding: 20px;
      background-color: #ffffff;
      border-radius: 4px;
      .InfBotBox {
        display: flex;
        justify-content: space-between;
        padding-bottom: 15px;
        border-bottom: solid 1px #efefef;

        > div {
          &:nth-child(1) {
            flex: 1;
            display: flex;
            #SourceIcon {
              align-self: center;
            }
            .botName {
              &:hover {
                color: #ff924b;
              }

              width: 160px;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              align-self: center;
              font-size: 14px;
              font-weight: 600;
              cursor: pointer;
              letter-spacing: 0px;
              color: #222222;
            }
          }
          &:nth-child(2) {
            display: flex;
            .score {
              font-size: 13px;
              font-weight: 600;
              letter-spacing: 0px;
              color: #fd7f2c;
              margin-right: 5px;
            }
            .num-img {
              width: 13px;
              height: 13px;
              align-self: center;
              cursor: pointer;
            }
          }
        }
        .trendStyle {
          font-size: 14px;
          font-weight: 600;
          color: #fd7f2c;
          .k_line {
            cursor: pointer;
            width: 13px;
            height: 13px;
            align-self: center;
            margin-left: 7px;
          }
        }
      }
      .InfBotBox1 {
        display: flex;
        justify-content: space-around;
        height: 86px;
        //高
        .high {
          align-self: center;
          > p {
            text-align: center;
            &:nth-child(1) {
              font-size: 14px;
              font-weight: 600;
              letter-spacing: 0px;
              color: #ea4759;
              margin-bottom: 3px;
              > span {
                font-size: 13px;
                margin-left: 2px;
              }
            }
            &:nth-child(2) {
              font-size: 12px;
              letter-spacing: 0px;
              color: #888888;
            }
          }
        }
        // 中
        .in {
          align-self: center;
          > p {
            text-align: center;
            &:nth-child(1) {
              font-size: 14px;
              font-weight: 600;
              letter-spacing: 0px;
              color: #fd7f2c;
              margin-bottom: 3px;
              > span {
                font-size: 13px;
                margin-left: 2px;
              }
            }
            &:nth-child(2) {
              font-size: 12px;
              letter-spacing: 0px;
              color: #888888;
            }
          }
        }
        // 低
        .low {
          align-self: center;
          > p {
            text-align: center;
            &:nth-child(1) {
              margin-bottom: 3px;
              font-size: 14px;
              font-weight: 600;
              letter-spacing: 0px;
              color: #4f5058;

              > span {
                font-size: 13px;
                margin-left: 2px;
              }
            }
            &:nth-child(2) {
              font-size: 12px;
              letter-spacing: 0px;
              color: #888888;
            }
          }
        }
        .noting {
          font-size: 12px;
          color: #888;
          margin: auto;
        }
      }
    }
  }
  .goodsDetailsMainRight {
    flex: 1;
    margin-left: 10px;
    height: 100%;
  }
  #collectRoot {
    box-sizing: border-box;
    flex: 1;
    height: 100%;
    // margin-top: @margin-num;
    margin-left: @margin-num;
    // margin-right: @margin-num;
    background-color: #f1f1f1;
    .rightBox {
      position: relative;
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      height: 100%;
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      border-radius: 6px;
      .btn_group {
        text-align: left;
        .active {
          background-color: #fd7f2c;
          color: #ffffff !important;
        }
        button {
          font-size: 14px;
          color: #555;
          padding-left: 23px;
          padding-right: 23px;
          height: 40px;
          background-color: #fff;
          border-radius: 4px;
          margin-right: 7px;
          font-weight: 600;
        }
        button:hover {
          color: #fd7f2c;
        }
      }
    }
    .rightBox-content {
      position: relative;
      background-color: #ffffff;
      border-radius: 6px;
      // margin-top: 10px;
      height: calc(100% - 20px);
      // height: 100%;
      overflow: scroll;
      overflow-x: hidden;
    }
  }
  .display_box {
    width: 99%;
    height: 20px;
    position: absolute;
    top: 50px;
    background: #fff;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    z-index: 100;
  }
  // 趋势图
  .popup_wrap {
    padding: 20px 30px 0;
    .popup_wrap-title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .title {
        font-size: 16px;
        font-weight: 600;
        color: #222;
      }
      .switch {
        display: flex;
        position: relative;
        left: -21px;
        top: 84px;
        z-index: 222;
        .switch-btn {
          width: 50px;
          height: 28px;
          line-height: 28px;
          text-align: center;
          font-size: 13px;
          color: #555555;
          background-color: #fff;
          border: 1px solid #efefef;
          box-sizing: border-box;
          cursor: pointer;
        }
        .switch-btn:first-child {
          border-radius: 6px 0px 0px 6px;
          //   border-right: none ;
        }
        .switch-btn:last-child {
          border-radius: 0px 6px 6px 0px;
        }
        .native {
          border: 1px solid #fd7f2c;
          color: #fd7f2c;
        }
      }

      .time_slot {
        position: relative;
        left: -20px;
        // height: 62px;
        display: flex;
        justify-content: flex-end;
        align-items: flex-end;
        .tab01 {
          margin-right: 20px;
        }
      }
    }
    .popup_wrap-explain {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 12px;
      span {
        margin-right: 4px;
      }
      .text {
        font-size: 13px;
        color: #555;
        margin-left: 18px;
        .num {
          color: #fd7f2c;
        }
      }
    }
    .popup_wrap-echart {
      width: 100%;
      height: 300px;
      .zw,
      .zw img {
        top: 60% !important;
      }
    }
    .m-t30 {
      margin-top: 30px;
    }
  }
}
</style>
